{% extends 'goodies/mainjquery.html' %}

{% load thumbnail %}

{% block content %}

<script src="/common/custom/lightbox/bootstrap-lightbox.js"></script>
<link href="/common/custom/lightbox/bootstrap-lightbox.css" rel="stylesheet" />
<style type="text/css">
  .center {
     float: none;
     margin-left: auto;
     margin-right: auto; }
    
</style>

     <div class='container-fluid'>
        <div class='row-fluid'>
        <div class='span2'>
           <a href="#" class="thumbnail">
           {% thumbnail book.pictures.all.0.image "100x100" crop="center" as small %}
           <img src="{{small.url}}" alt="Click to view the lightbox" width="100%">
           <img src="/common/img/but/add3.gif" width='100%' alt="положить в корзину">
           {% endthumbnail %}
           
           </a>
          
        </div>

         <div class='span10'>

            <span class="zag"> {{book.name}}</span>
            <br>
            
            <span class="author">{{book.author}}</span>
            <br>
            <span class="search">{{book.year}}г.</span>
            <br>
            <span class="search">{{book.place}}</span>   

            <br>

            <span class="search">{{book.description}}</span>
            <hr>
            <img src="/common/img/zag/i_price.gif"  >
            
            <span class="price1">{{book.price}}.00 руб.</span>
            <hr>
  


             <ul class="inline">
                        
              {% for picture in book.pictures.all %}
                  {% thumbnail picture.image "1000" as big %}
                      {% thumbnail picture.image "100x100" crop="center" as small %}
                    
                      <li >

                            <a data-toggle="lightbox" href="#largeIdiot{{forloop.counter}}" class="thumbnail">
                                <img src="{{small.url}}" alt="Click to view the lightbox">
                            </a>
                      </li>

                        <div id="largeIdiot{{forloop.counter}}" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
                            <div class='lightbox-header'>
                                <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button>
                            </div>
                            <div class='lightbox-content'>
                                <img src="{{big.url}}">
               
                            </div>
                        </div>
                    


                      {% endthumbnail %}
                  {% endthumbnail %}
               {% endfor %}
               </ul>
         </div>


   
            


      
     </div>
   </div><hr>



{% endblock content %}

